<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            $(document).ready(function() {

                $("nav-tabs li a").click(function() {
                    $(this).addClass("active").siblings().removeClass("active");
                });
            });
        </script>
        <ui:define name="title">
            <ui:insert name="title"></ui:insert>
        </ui:define>
    </h:head>
    <h:body>
        <ui:composition template="/template.xhtml">
            <ui:define name="header" >
                <h:panelGroup>
                    <h:panelGroup rendered="#{loginBean.loggedIn}" class="loginText">
                        <h:form>
                            <div width="450" style="float: left">
                                <h:outputText value="Witaj " class="headerTextWelcome"/>
                                <h:outputText value="#{loginBean.username}" class="headerTextWelcome2"/>
                                <h:outputText value=", " class="headerTextWelcome" style="margin-left: 0px;"/>
                            </div>
                            <h:commandLink action="#{loginBean.doLogout}" value="wyloguj." class="headerTextLogOut" />    
                        </h:form>
                    </h:panelGroup>
                    <h:outputLink value="#" id="ll" rendered="#{!loginBean.loggedIn}" class="loginText">
                        <rich:componentControl event="click" operation="show" target="lp"> 
                            <a4j:param name="event" value="event" noEscape="true" />
                            <rich:hashParam>
                                <a4j:param noEscape="true" name="top"
                                           value="jQuery(#{rich:element('ll')}.parentNode).offset().top + jQuery(#{rich:element('ll')}.parentNode).height()" />
                                <a4j:param noEscape="true" name="left" value="jQuery(#{rich:element('ll')}.parentNode).offset().left" />
                            </rich:hashParam>
                        </rich:componentControl>
                        <h:outputText value="#{bundle['login.login']}" class="headerText" style="text-decoration: none"/>
                    </h:outputLink>
                </h:panelGroup>

                <rich:messages globalOnly="true" ajaxRendered="true" rendered="false"/>
                <rich:notifyMessages stayTime="2000" nonblocking="true" />

                <rich:popupPanel id="lp" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" onmaskclick="#{rich:component('lp')}.hide()">
                    <f:facet name="controls">
                        <h:outputLink value="#" onclick="#{rich:component('lp')}.hide();
                                return false;">
                         
                        </h:outputLink>
                    </f:facet>
                    <h:panelGroup rendered="#{!loginBean.loggedIn}">
                        <h:form id="login-form" rendered="#{!loginBean.loggedIn}" class="headerText" style="text-align: left;">
                            <h:outputText value="#{bundle['login.username']}" class="headerTextLoginPopup" />
                            <h:inputText value="#{loginBean.username}" id="username" />
                            <h:outputText value="#{bundle['login.password']}" class="headerTextLoginPopup"/>
                            <h:inputSecret value="#{loginBean.password}" id="password" />
                            <h:commandButton id="button" value="Zaloguj" action="#{loginBean.doLogin}" class="headerLoginButton"/>
                            <br />
                            <p:commandLink id="nonAjax" action="#{loginBean.forgotPassword}" ajax="false" style="text-decoration: none">  
                                <h:outputText value="#{bundle['login.forgotPassword']}" styleClass="forgotText"/>  
                            </p:commandLink>  
                        </h:form>
                    </h:panelGroup>
                </rich:popupPanel>
            </ui:define>

            <ui:define name="tabs">

                <div class="nav-tabs">
                    <ul class="ulTab">
                        <li >
                            <a class="#{tab eq 'home' ? 'active' : ''}" href="../index.xhtml">#{bundle['menu.home']}</a>
                        </li>
                        <li >
                            <a class="#{tab eq 'about' ? 'active' : ''}" href="../about.xhtml">#{bundle['menu.about']}</a>
                        </li>

                        <li >
                            <a class="#{tab eq 'news' ? 'active' : ''}" href="../news.xhtml">#{bundle['menu.news']}</a>
                        </li>

                        <li >
                            <a class="#{tab eq 'offer' ? 'active' : ''}" href="../offer.xhtml">#{bundle['menu.offer']}</a>
                        </li>

                        <ui:fragment rendered="#{!loginBean.loggedIn}">
                            <li >
                                <a class="#{tab eq 'register' ? 'active' : ''}" href="../register.xhtml">#{bundle['menu.register']}</a>
                            </li>
                        </ui:fragment>
                        <ui:fragment rendered="#{loginBean.loggedIn}">
                            <li >
                                <a class="#{tab eq 'clientPanel' ? 'active' : ''}" href="../secured/clientPanel.xhtml">#{bundle['menu.clientPanel']}</a>
                            </li>
                        </ui:fragment>                        
                        <ui:fragment rendered="#{loginBean.loggedIn}">
                            <li >
                                <a class="#{tab eq 'reservation' ? 'active' : ''}" href="../secured/reservation.xhtml">#{bundle['menu.reservation']}</a>
                            </li>
                        </ui:fragment>
                        <ui:fragment rendered="#{loginBean.loggedInAdmin}">
                            <li >
                                <a class="#{tab eq 'reservation' ? 'active' : ''}" href="../secured/adminitration.xhtml">#{bundle['admin.panel']}</a>
                            </li>
                        </ui:fragment>
                    </ul>
                </div>

                <div class="divContent" id="tab-content">
                    <ui:insert  name="tab-content"></ui:insert>
                </div>
            </ui:define> 
            <ui:define name="bottom">
                <p class="bottomWrapperText">#{mainSite.welcomeText} CarPark 2013</p>
            </ui:define>
        </ui:composition>
    </h:body>
</html>